<template>
    <div v-if="formSimpleItem.includes(item.key)">
        {{parseSimpleStr(item,formData[item.key])}}
    </div>
    <div v-else>
        <span v-if="formHasSlotKeys.includes(item.key)">
            <fromSlot :item="item" :data="formData" :slotName="formSlots[item.key]"/>
        </span>
        <span v-else>
            <span v-if="textTypes.includes(item.type)">
                <Input :autosize="{minRows: 2, maxRows: 4}"
                       :clearable="true"
                       :maxlength="item.maxlength?item.maxlength:100"
                       :password="item.type=='password'"
                       :placeholder="item.placeholder"
                       :rows="2"
                       :show-word-limit="!(item.type=='password')"
                       :style="{width:(item.width?item.width:200)+'px'}"
                       :type="item.type=='mobile'?'tel':item.type"
                       autocomplete="false"
                       size="small"
                       v-model="formData[item.key]"/>
            </span>
            <span v-else-if="item.type=='radio'">
                <RadioGroup v-model="formData[item.key]">
                    <Radio :false-value="''"
                           :key="radio.id"
                           :label="radio.value"
                           :true-value="radio.value"
                           v-for="(radio) in _getDicData(item)"
                    >
                        {{radio.title}}
                    </Radio>
                </RadioGroup>
            </span>
            <span v-else-if="item.type=='checkbox'">
                <CheckboxGroup v-model="formData[item.key]">
                    <Checkbox :key="checkbox.id"
                              :label="checkbox.value"
                              v-for="(checkbox) in _getDicData(item)"
                    >
                        {{checkbox.title}}
                    </Checkbox>
                </CheckboxGroup>
            </span>
            <span v-else-if="item.type=='singleSelect'">
                <Select :style="{width:(item.width?item.width:200)+'px'}"
                        :transfer="true"
                        :clearable="true"
                        size="small"
                        v-model="formData[item.key]">
                    <Option :key="singleSelect.id"
                            :value="singleSelect.value"
                            v-for="(singleSelect) in _getDicData(item)">
                        {{singleSelect.title}}
                    </Option>
                </Select>
            </span>
            <span v-else-if="item.type=='multipleSelect'">
                <Select :max-tag-count="2"
                        :multiple="true"
                        :style="{width:(item.width?item.width:200)+'px'}"
                        :transfer="true"
                        size="small"
                        v-model="formData[item.key]">
                    <Option :key="singleSelect.id"
                            :value="singleSelect.value"
                            v-for="(singleSelect) in _getDicData(item)">
                        {{singleSelect.title}}
                    </Option>
                </Select>
            </span>
             <span v-else-if="item.type=='date'">
                 <DatePicker :format="item.format?item.format:'yyyy-MM-dd'"
                             :placeholder="item.placeholder"
                             v-model="formData[item.key]"
                             :style="{width:(item.width?item.width:200)+'px'}"
                             :transfer="true"
                             type="date"
                 >

                 </DatePicker>
             </span>
            <span v-else-if="item.type=='dateRange'">
                 <DatePicker :format="item.format?item.format:'yyyy-MM-dd'"
                             :placeholder="item.placeholder"
                             :style="{width:(item.width?item.width:200)+'px'}"
                             :transfer="true"
                             v-model="formData[item.key]"
                             separator=" 至 "
                             type="daterange"
                 >

                 </DatePicker>
             </span>
             <span v-else-if="item.type=='datetime'">
                 <DatePicker :format="item.format?item.format:'yyyy-MM-dd HH:mm:ss'"
                             :placeholder="item.placeholder"
                             v-model="formData[item.key]"
                             :style="{width:(item.width?item.width:200)+'px'}"
                             :transfer="true"
                             type="datetime"
                 >

                 </DatePicker>
             </span>
            <span v-else-if="item.type=='datetimeRange'">
                 <DatePicker :format="item.format?item.format:'yyyy-MM-dd HH:mm:ss'"
                             :placeholder="item.placeholder"
                             v-model="formData[item.key]"
                             :style="{width:(item.width?item.width:200)+'px'}"
                             :transfer="true"
                             separator=" 至 "
                             type="datetimerange"
                 >

                 </DatePicker>
             </span>
            <span v-else-if="item.type=='time'">
                 <TimePicker :format="item.format?item.format:'HH:mm:ss'"
                             :placeholder="item.placeholder"
                             v-model="formData[item.key]"
                             :style="{width:(item.width?item.width:200)+'px'}"
                             :transfer="true"
                             separator=" 至 "
                             type="time"
                 >

                 </TimePicker>
             </span>
            <span v-else-if="item.type=='timeRange'">
                 <TimePicker :format="item.format?item.format:'HH:mm:ss'"
                             :placeholder="item.placeholder"
                             v-model="formData[item.key]"
                             :style="{width:(item.width?item.width:200)+'px'}"
                             :transfer="true"
                             @on-change="formData[item.key]=$event"
                             separator=" 至 "
                             type="timerange"
                 >

                 </TimePicker>
             </span>
            <span v-else-if="item.type=='number'">
                <NumberInput :placeholder="item.placeholder"
                             :formatter="value => item.dataFormater(value,!Number.isNaN(item.scale)?item.scale:2)"
                             :precision="!Number.isNaN(item.scale)?item.scale:2"
                             :step="item.step?item.step:0"
                             :style="{width:(item.width?item.width:200)+'px'}"
                             v-model="formData[item.key]"></NumberInput>
             </span>
            <span v-else-if="item.type=='currency'">
                <Poptip trigger="focus">
                <NumberInput
                    :active-change="true"
                    :formatter="value =>  '￥'+item.dataFormater(value,!Number.isNaN(item.scale)?item.scale:2)"
                    :parser="value => value.replace(/\￥\s?|(,*)/g, '')"
                    :placeholder="item.placeholder"
                    :precision="!Number.isNaN(item.scale)?item.scale:2"
                    :step="item.step?item.step:0"
                    :style="{width:(item.width?item.width:200)+'px'}"
                    v-model="formData[item.key]"></NumberInput>
                    <div
                        slot="content">{{ convertCurrencyToChinese(formData[item.key]) }}</div>
                </Poptip>
             </span>
             <span v-else-if="item.type=='decimal'">
                <NumberInput :placeholder="item.placeholder"
                             :formatter="value => item.dataFormater(value,!Number.isNaN(item.scale)?item.scale:2)"
                             :precision="!Number.isNaN(item.scale)?item.scale:2"
                             :step="item.step?item.step:0"
                             :style="{width:(item.width?item.width:200)+'px'}"
                             v-model="formData[item.key]"></NumberInput>
             </span>
               <span v-else-if="item.type=='scale'">
                <NumberInput :placeholder="item.placeholder"
                             :formatter="value =>  item.dataFormater(value,!Number.isNaN(item.scale)?item.scale:2)+'%'"
                             :parser="value => value.replace(/\%\s?|(,*)/g, '')"
                             :precision="!Number.isNaN(item.scale)?item.scale:2"
                             :step="item.step?item.step:0" :max="100"
                             :style="{width:(item.width?item.width:200)+'px'}"
                             v-model="formData[item.key]"></NumberInput>
             </span>
            <span v-else>
                {{item.key}}暂不支持
            </span>
        </span>
        <slot></slot>
    </div>
</template>
<script>
    import ruiMixin from './rui-global-components';
    import NumberInput from './number-input.vue';

    export default {
        name: 'form-item',
        mixins: [ruiMixin],
        components: {
            NumberInput
        },
        props: {
            formData: {
                type: Object,
                require: true
            },
            item: {
                type: Object,
                require: true
            },
            formSimpleItem: {
                type: Array,
                require: true
            },
            formRules: {
                type: Object,
                require: true
            },
            formSlots: {
                type: Object,
                require: true
            },
            formHasSlotKeys: {
                type: Array,
                require: true
            },
            dataDics: {
                type: Object,
                require: true
            }

        },
        data() {
            return {

            }
        },
        methods: {
        },
        mounted() {
        },
        beforeMount() {
        }
    }
</script>
